<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div class="big-container">
          <div class="user-detail-container">
            <div class="avatar">
              <el-image style="width: 100%; height: 100%" :src="imgurl" fit="fit" />
            </div>
            <div class="user-base-message">
              <p>用户名：{{ userDetail.username?userDetail.username:'倒反天罡' }}</p>
              <p>手机号：{{ userDetail.phone?userDetail.phone:'暂无' }}</p>
              <p>邮箱：{{ userDetail.email?userDetail.email:'暂无' }}</p>
              <!-- <p>性别：{{userDetail.}}</p> -->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <el-form ref="form" :model="form" label-width="100px" :rules="formRules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.gender">
              <el-radio label="true">男</el-radio>
              <el-radio label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">修改信息</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
            <el-button @click="updatePass">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 修改密码弹出框 -->
    <el-dialog title="修改密码" :visible.sync="dialogTableVisible" @close="cancelUpdatePass">
      <el-form
        ref="passFromRef"
        label-position="right"
        label-width="80px"
        :model="passFrom"
        :rules="passFormRules"
      >
        <el-form-item label="密码" prop="password">
          <el-input v-model="passFrom.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input v-model="passFrom.confirmPass" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitPass">提交</el-button>
          <el-button @click="cancelUpdatePass">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as common from '@/common/common'

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value) {
        if (value.length < 8) {
          callback(new Error('用户名不得低于8位'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }

    const validatePhone = (rule, value, callback) => {
      const reg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (value) {
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error('手机号格式不正确'))
        }
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      }
      if (value.length < 8) {
        callback(new Error('密码最低8位数'))
      } else {
        callback()
      }
    }
    const validateConfirmPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passFrom.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      imgurl: require('@/assets/hamburger.jpg'),
      dialogTableVisible: false,
      // 修改密码表单
      passFrom: {
        password: '',
        confirmPass: ''
      },
      passFormRules: {
        password: [{ required: true, trigger: 'blur', validator: validatePassword },
          { min: 8, message: '长度最低8个字符', trigger: 'blur' }],
        confirmPass: [{ required: true, trigger: 'blur', validator: validateConfirmPass }]
      },
      // 修改用户信息表单
      form: {
        id: '',
        username: '',
        email: '',
        phone: '',
        gender: this.userDetail ? this.userDetail.gender : 'false'
      },
      // 用户信息验证规则
      formRules: {
        username: [{ trigger: 'blur', validator: validateUsername }],
        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],
        phone: [{ type: 'phone', trigger: 'change', validator: validatePhone }]
      }
    }
  },
  computed: {
    userDetail() {
      return this.$store.getters.userDetail
    },
    isLogin() {
      return this.$store.getters.isLogin
    }
  },
  created() {
    // this.check()
  },
  methods: {

    // 提交用户修改的信息
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$confirm('是否修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.form.id = this.userDetail.id
            // if (this.form.gender === '0') {
            //   this.form.gender = true
            // } else {
            //   this.form.gender = false
            // }
            this.form.username = this.form.username ? this.form.username : null
            this.form.phone = this.form.phone ? this.form.phone : null
            this.form.email = this.form.email ? this.form.email : null
            // this.form.username = this.form.username ? this.form.username : null
            this.$store.dispatch('user/update', this.form).then(res => {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
              })
              common.getUserAllInfo()
            }).catch(() => {
              // this.$notify.error({
              //   title: '错误',
              //   message: '操作失败'
              // })
            })

            this.$refs['form'].resetFields()
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    onReset() {
      this.$refs['form'].resetFields()
    },
    // 打开修改密码框
    updatePass() {
      this.dialogTableVisible = true
    },
    // 取消更新密码，关闭修改密码框
    cancelUpdatePass() {
      this.dialogTableVisible = false
      this.$refs['passFromRef'].resetFields()
    },
    // 提交密码修改
    submitPass() {
      this.$refs['passFromRef'].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const userQo = {
              id: this.userDetail.id,
              password: this.passFrom.password
            }
            this.$store.dispatch('user/update', userQo).then(res => {
              this.$notify.success({
                title: '成功',
                message: '修改成功，需要重新登陆'
              })
              setTimeout(() => {
                this.$store.dispatch('user/logout').then(res => {
                  this.$router.push('/lr/login')
                })
              }, 1000)
            }).catch(() => {
              // this.$notify.error({
              //   title: '失败',
              //   message: '操作失败'
              // })
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.big-container {
  width: 100%;
  display: flex;

  .user-detail-container {
    .avatar {
      width: 200px;
      height: 200px;
      // padding: 20px;
      .el-image {
        border-radius: 50%;
      }
    }
    .user-base-message {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
